<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>文献资源管理系统-是否到货加载示例</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
</head>
<body >
    <div class="page wrap-week">
   
        <!-- 这里是页面内容区 -->
        <div class="content">
            <div class="card card-echarts">
                <div class="card-header"><p></p></div>
                <div class="card-content">
                    <div class="card-content-inner">
                        <div id="main"  style="height: 500px; width :70%; margin-top: 70px; float: left;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
   


<!-- ./wrapper -->
<script src="lib/jquery.min.js"></script>
<script src="lib/echarts.min.js"></script>
<script src="lib/walden.js"></script>

<script src="lib/mm.echarts.min.js"></script>
<script src="lib/china.js"></script>
<script src="https://cdn.bootcss.com/vue/2.6.9/vue.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    var json = [];
    var datas =[];
    // 指定图表的配置项和数据
    $(function () {
        $.ajax({
            url: 'http://29n01o8660.oicp.vip/server/selectPuchasecurrencyTj',
            type: 'get', //静态资源
            //data:'',
            datatype: 'json',
            success: function (result) {
              
                // 指定图表的配置项和数据
                var jsonObject = eval(result);
                for(var i=0;i<jsonObject.length;i++){
                    json.push({value:jsonObject[i].count});
                    datas.push(jsonObject[i].currency);
                    // alert(JSON.stringify(json))
                }
                // json.push({value:jsonObject[i].count,name:jsonObject[i].currency});
                // datas.push(jsonObject[i].currency);
                console.log(result);
                option = {
                    title: {
                        text: '用户分布图',
                        subtext: '持明法洲',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data:datas
                    },
                    visualMap: {
                        min: 0,
                        max: 2500,
                        left: 'left',
                        top: 'bottom',
                        text: ['高', '低'],           // 文本，默认为数值文本
                        calculable: true
                    },
                    toolbox: {
                        show: true,
                        orient: 'vertical',
                        left: 'right',
                        top: 'center',
                        feature: {
                            mark: {show: true},
                            dataView: {show: true, readOnly: false},
                            restore: {show: true},
                            saveAsImage: {show: true}
                        }
                    },
                    series: [
                        {
                            name: '男',
                            type: 'map',
                            mapType: 'china',
                            roam: false,
                            label: {
                                normal: {
                                    show: false
                                },
                                emphasis: {
                                    show: true
                                }
                            },
                            data:json
                        },
                        // {
                        //     name: '女',
                        //     type: 'map',
                        //     mapType: 'china',
                        //     label: {
                        //         normal: {
                        //             show: false
                        //         },
                        //         emphasis: {
                        //             show: true
                        //         }
                        //     },
                        //     data: result.woman
                        // }
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            }
        })
    });
</script>
</body>
</html>